<template>
    <div class="radius-btn" :style="style">
        {{txt}}
    </div>
</template>

<script>
    export default {
        props: {
            width: {
                type: String,
                default: "100%"
            },
            height: {
                type: String,
                default: null
            },
            txt:{
                type:String,
                default:"完成"
            },
            bgColor:{
                type:String,
                default:"#00D6C0"
            },
            borderColor:{
                type:String
            },
            color:{
                type:String,
                default:"white"
            },
            fontSize:{
                type:String,
                default:null
            }

        },
        computed: {
            style() {
                let borderStyle
                if(this.borderColor){
                    borderStyle= `border: 1Px solid ${this.borderColor}`
                }

                return "font-size:"+this.fontSize+";color:"+this.color+";background-color:"+this.bgColor+";width:" + this.width + ";height:" + this.height+";line-height:"+this.height+";border-radius:"+this.height+";"+borderStyle
            }
        }
    }
</script>

<style scoped lang="stylus">
    .radius-btn
        overflow hidden
        height 35px
        line-height 35px
        text-align center
        color white
        border-radius 5px
        font-size 14px
        font-weight 300

</style>
